<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>某蓝滴视频网站</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .video-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      }
      .control-hover {
        @apply transition-all duration-300 hover:bg-primary/80 hover:scale-110;
      }
      .progress-thumb {
        @apply appearance-none w-3 h-3 rounded-full bg-white shadow cursor-pointer;
      }
    }
  </style>
</head>
<body class="bg-gray-100 font-inter text-dark min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-play-circle text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">视频播放器</h1>
      </div>
      <nav>
        <ul class="flex space-x-6">
          <li><a href="#" class="hover:text-primary transition-colors">首页</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">库</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">收藏</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <div class="max-w-5xl mx-auto">
      <!-- 视频内容 -->
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4" id="videoTitle">长离壁纸</h2>
      
      <!-- 视频播放器容器 -->
      <div class="relative bg-dark rounded-lg overflow-hidden video-shadow aspect-video mb-6 group">
        <!-- 视频元素 -->
        <video 
          id="videoPlayer" 
          class="w-full h-full object-contain"
          poster="https://res.cloudinary.com/dwpymmvtm/image/upload/v1761996122/D65D75D2-4C64-48e4-B3F9-974AE64E0B6F_le0urb.jpg"
        >
          <!-- 提供多种格式以确保兼容性 -->
          <source src="https://res.cloudinary.com/dwpymmvtm/video/upload/v1761995904/10%E6%9C%8821%E6%97%A5%E9%95%BF%E7%A6%BB%E5%A3%81%E7%BA%B8_llgpzj.mp4" type="video/mp4">
          您的浏览器不支持HTML5视频播放。
        </video>
        
        <!-- 加载指示器 -->
        <div id="loader" class="absolute inset-0 flex items-center justify-center bg-dark/50 hidden">
          <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
        </div>
        
        <!-- 播放按钮（大） -->
        <div id="bigPlayButton" class="absolute inset-0 flex items-center justify-center">
          <button class="w-20 h-20 rounded-full bg-primary/80 text-white flex items-center justify-center text-4xl control-hover">
            <i class="fa fa-play ml-1"></i>
          </button>
        </div>
        
        <!-- 控制栏 -->
        <div id="controls" class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <!-- 进度条 -->
          <div class="mb-3 relative h-1 bg-white/30 rounded-full cursor-pointer group" id="progressContainer">
            <div id="progressBar" class="absolute top-0 left-0 h-full bg-primary rounded-full w-0"></div>
            <div id="bufferBar" class="absolute top-0 left-0 h-full bg-white/50 rounded-full w-0"></div>
          </div>
          
          <!-- 控制按钮 -->
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4">
              <!-- 播放/暂停按钮 -->
              <button id="playPauseBtn" class="text-white control-hover">
                <i class="fa fa-play text-xl"></i>
              </button>
              
              <!-- 音量控制 -->
              <div class="flex items-center space-x-2 group/volume">
                <button id="muteBtn" class="text-white control-hover">
                  <i class="fa fa-volume-up text-xl"></i>
                </button>
                <div class="w-0 group-hover/volume:w-24 overflow-hidden transition-all duration-300">
                  <input 
                    type="range" 
                    id="volumeSlider" 
                    min="0" 
                    max="1" 
                    step="0.05" 
                    value="1"
                    class="w-full accent-primary cursor-pointer"
                  >
                </div>
              </div>
              
              <!-- 时间显示 -->
              <div class="text-white text-sm">
                <span id="currentTime">00:00</span>
                <span class="mx-1">/</span>
                <span id="totalTime">00:00</span>
              </div>
            </div>
            
            <div class="flex items-center space-x-4">
              <!-- 播放速度 -->
              <div class="relative group/speed">
                <button id="speedBtn" class="text-white control-hover">
                  <i class="fa fa-tachometer text-xl"></i>
                </button>
                <div class="absolute bottom-full right-0 mb-2 bg-dark/90 text-white rounded-md p-2 hidden group-hover/speed:block w-24">
                  <ul class="space-y-1">
                    <li><button class="speed-option w-full text-left px-2 py-1 hover:bg-primary/50 rounded" data-speed="0.5">0.5x</button></li>
                    <li><button class="speed-option w-full text-left px-2 py-1 hover:bg-primary/50 rounded" data-speed="1">1x</button></li>
                    <li><button class="speed-option w-full text-left px-2 py-1 hover:bg-primary/50 rounded" data-speed="1.5">1.5x</button></li>
                    <li><button class="speed-option w-full text-left px-2 py-1 hover:bg-primary/50 rounded" data-speed="2">2x</button></li>
                  </ul>
                </div>
              </div>
              
              <!-- 全屏按钮 -->
              <button id="fullscreenBtn" class="text-white control-hover">
                <i class="fa fa-expand text-xl"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 视频信息 -->
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h3 class="text-xl font-semibold mb-3">视频信息</h3>
        <p class="text-gray-600 mb-4">
          这是一个示例视频播放器，支持播放控制、音量调节、播放速度调整和全屏等功能。您可以通过上方的视频播放器体验这些功能。
        </p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">#视频播放</span>
          <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">#HTML5</span>
          <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">#演示</span>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-6">
    <div class="container mx-auto px-4 text-center">
      <p>© 2023 视频播放器 | 使用 HTML5、Tailwind CSS 和 JavaScript 构建</p>
    </div>
  </footer>

  <script>
    // 获取DOM元素
    const videoPlayer = document.getElementById('videoPlayer');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const bigPlayButton = document.getElementById('bigPlayButton');
    const muteBtn = document.getElementById('muteBtn');
    const volumeSlider = document.getElementById('volumeSlider');
    const progressBar = document.getElementById('progressBar');
    const bufferBar = document.getElementById('bufferBar');
    const progressContainer = document.getElementById('progressContainer');
    const currentTimeEl = document.getElementById('currentTime');
    const totalTimeEl = document.getElementById('totalTime');
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    const speedBtn = document.getElementById('speedBtn');
    const speedOptions = document.querySelectorAll('.speed-option');
    const loader = document.getElementById('loader');
    const controls = document.getElementById('controls');
    const videoTitle = document.getElementById('videoTitle');
    
    // 格式化时间（将秒转换为分:秒格式）
    function formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      seconds = Math.floor(seconds % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
    
    // 更新进度条和时间显示
    function updateProgress() {
      const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;
      progressBar.style.width = `${percent}%`;
      currentTimeEl.textContent = formatTime(videoPlayer.currentTime);
      
      // 更新缓冲进度
      if (videoPlayer.buffered.length > 0) {
        const bufferedEnd = videoPlayer.buffered.end(videoPlayer.buffered.length - 1);
        const bufferedPercent = (bufferedEnd / videoPlayer.duration) * 100;
        bufferBar.style.width = `${bufferedPercent}%`;
      }
    }
    
    // 播放/暂停切换
    function togglePlay() {
      if (videoPlayer.paused || videoPlayer.ended) {
        videoPlayer.play();
        playPauseBtn.innerHTML = '<i class="fa fa-pause text-xl"></i>';
        bigPlayButton.style.display = 'none';
      } else {
        videoPlayer.pause();
        playPauseBtn.innerHTML = '<i class="fa fa-play text-xl"></i>';
        bigPlayButton.style.display = 'flex';
      }
    }
    
    // 静音切换
    function toggleMute() {
      videoPlayer.muted = !videoPlayer.muted;
      if (videoPlayer.muted) {
        muteBtn.innerHTML = '<i class="fa fa-volume-off text-xl"></i>';
        volumeSlider.value = 0;
      } else {
        muteBtn.innerHTML = '<i class="fa fa-volume-up text-xl"></i>';
        volumeSlider.value = videoPlayer.volume;
      }
    }
    
    // 调整音量
    function setVolume() {
      videoPlayer.volume = volumeSlider.value;
      videoPlayer.muted = volumeSlider.value == 0;
      
      if (videoPlayer.muted) {
        muteBtn.innerHTML = '<i class="fa fa-volume-off text-xl"></i>';
      } else {
        muteBtn.innerHTML = '<i class="fa fa-volume-up text-xl"></i>';
      }
    }
    
    // 调整播放进度
    function scrub(e) {
      const scrubTime = (e.offsetX / progressContainer.offsetWidth) * videoPlayer.duration;
      videoPlayer.currentTime = scrubTime;
    }
    
    // 切换全屏
    function toggleFullscreen() {
      const videoContainer = videoPlayer.parentElement;
      
      if (!document.fullscreenElement) {
        if (videoContainer.requestFullscreen) {
          videoContainer.requestFullscreen();
        } else if (videoContainer.webkitRequestFullscreen) { /* Safari */
          videoContainer.webkitRequestFullscreen();
        } else if (videoContainer.msRequestFullscreen) { /* IE11 */
          videoContainer.msRequestFullscreen();
        }
        fullscreenBtn.innerHTML = '<i class="fa fa-compress text-xl"></i>';
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { /* Safari */
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE11 */
          document.msExitFullscreen();
        }
        fullscreenBtn.innerHTML = '<i class="fa fa-expand text-xl"></i>';
      }
    }
    
    // 设置播放速度
    function setPlaybackSpeed(speed) {
      videoPlayer.playbackRate = speed;
      // 更新所有速度选项的样式
      speedOptions.forEach(option => {
        if (parseFloat(option.dataset.speed) === speed) {
          option.classList.add('bg-primary/50');
        } else {
          option.classList.remove('bg-primary/50');
        }
      });
    }
    
    // 显示/隐藏控制栏（仅移动设备）
    function toggleControls() {
      if (window.innerWidth < 768) {
        controls.classList.toggle('opacity-0');
      }
    }
    
    // 事件监听器
    videoPlayer.addEventListener('loadedmetadata', () => {
      totalTimeEl.textContent = formatTime(videoPlayer.duration);
    });
    
    videoPlayer.addEventListener('timeupdate', updateProgress);
    
    videoPlayer.addEventListener('play', () => {
      playPauseBtn.innerHTML = '<i class="fa fa-pause text-xl"></i>';
      bigPlayButton.style.display = 'none';
      loader.style.display = 'none';
    });
    
    videoPlayer.addEventListener('pause', () => {
      playPauseBtn.innerHTML = '<i class="fa fa-play text-xl"></i>';
      bigPlayButton.style.display = 'flex';
      loader.style.display = 'none';
    });
    
    videoPlayer.addEventListener('waiting', () => {
      loader.style.display = 'flex';
    });
    
    videoPlayer.addEventListener('canplay', () => {
      loader.style.display = 'none';
    });
    
    videoPlayer.addEventListener('ended', () => {
      playPauseBtn.innerHTML = '<i class="fa fa-play text-xl"></i>';
      bigPlayButton.style.display = 'flex';
      // 重置进度条到开始位置
      progressBar.style.width = '0%';
    });
    
    playPauseBtn.addEventListener('click', togglePlay);
    bigPlayButton.addEventListener('click', togglePlay);
    videoPlayer.addEventListener('click', togglePlay);
    
    muteBtn.addEventListener('click', toggleMute);
    volumeSlider.addEventListener('input', setVolume);
    
    progressContainer.addEventListener('click', scrub);
    
    fullscreenBtn.addEventListener('click', toggleFullscreen);
    
    // 播放速度选项
    speedOptions.forEach(option => {
      option.addEventListener('click', () => {
        setPlaybackSpeed(parseFloat(option.dataset.speed));
      });
    });
    
    // 点击视频显示/隐藏控制栏（移动设备）
    videoPlayer.addEventListener('click', toggleControls);
    
    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        fullscreenBtn.innerHTML = '<i class="fa fa-expand text-xl"></i>';
      } else {
        fullscreenBtn.innerHTML = '<i class="fa fa-compress text-xl"></i>';
      }
    });
    
    // 键盘控制
    document.addEventListener('keydown', (e) => {
      switch(e.key) {
        case ' ': // 空格键播放/暂停
        case 'k':
          togglePlay();
          break;
        case 'f': // f键全屏
          toggleFullscreen();
          break;
        case 'm': // m键静音
          toggleMute();
          break;
        case 'ArrowRight': // 右箭头快进5秒
          videoPlayer.currentTime = Math.min(videoPlayer.currentTime + 5, videoPlayer.duration);
          break;
        case 'ArrowLeft': // 左箭头后退5秒
          videoPlayer.currentTime = Math.max(videoPlayer.currentTime - 5, 0);
          break;
        case 'ArrowUp': // 上箭头增加音量
          volumeSlider.value = Math.min(parseFloat(volumeSlider.value) + 0.05, 1);
          setVolume();
          break;
        case 'ArrowDown': // 下箭头减小音量
          volumeSlider.value = Math.max(parseFloat(volumeSlider.value) - 0.05, 0);
          setVolume();
          break;
      }
    });
    
    // 初始化
    setPlaybackSpeed(1); // 设置默认播放速度
  </script>
</body>
</html>